// import React from "react";
// import { View, Text } from "react-native";
// import { useSelector } from "react-redux";

// function CartScreen() {
//     let {cart} = useSelector(state=>state.counterReducer)

//     return (  

//     );
// }

// export default CartScreen
// ;

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity,ScrollView } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import {add ,remove} from '../../redux/counter';
const CartItem = ({ item, onUpdateQuantity }) => {
  const [quantity, setQuantity] = useState(item.count);
  const dispatch = useDispatch()
  function addCart(item){
      dispatch(add(item))
  }
  function removeCart(item){
      dispatch(remove(item))
  }
  const decreaseQuantity = () => {
    if (quantity > 0) {
      setQuantity(quantity - 1);
      removeCart(item)
    }
  };

  const increaseQuantity = () => {
    setQuantity(quantity + 1);
    addCart(item)
  };

  return (
    <View style={styles.cartItem}>
    <View style={{display:"flex"}}>
      <Text style={styles.itemName}>{item.name}</Text>
      <Text style={styles.itemPrice}>${item.price}</Text>
    </View>
      <View style={styles.quantityContainer}>
        <TouchableOpacity onPress={decreaseQuantity}>
          <Text style={styles.quantityButton}>-</Text>
        </TouchableOpacity>
        <Text style={styles.quantity}>{quantity}</Text>
        <TouchableOpacity onPress={increaseQuantity}>
          <Text style={styles.quantityButton}>+</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const Cart = () => {
    let {cart} = useSelector(state=>state.counterReducer)
    const dispatch = useDispatch()
    function addCart(item){
        dispatch(add(item))
    }
    function removeCart(item){
        console.log("before remove",cart)
        dispatch(remove(item))
    }
    console.log(cart)
   let cartItems = cart.items.length > 0 ? cart.items : [];
  const [totalPrice, setTotalPrice] = useState(0);

  const updateQuantity = (id, count) => {
    const updatedCartItems = cartItems.map(item => {
      if (item.id === id) {
        item.count = count;
      }
      return item;
    });
    const totalPrice = updatedCartItems.reduce(
      (acc, item) => acc + item.price * item.count,
      0
    );
    setTotalPrice(totalPrice);
  };
  useEffect(()=>{
    updateQuantity()
  })
  return (
    <View style={styles.container}>
    <ScrollView>
      {cartItems.map(item => (
        <CartItem key={item.id} item={item} onUpdateQuantity={updateQuantity} />
      ))}
      </ScrollView>
      <Text style={styles.total}>Total: ${totalPrice.toFixed(2)}</Text>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Checkout</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 40,
  },
  cartItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  itemName: {
    fontSize: 18,
  },
  quantityContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  quantityButton: {
    fontSize: 24,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
    backgroundColor: '#f0f0f0',
  },
  quantity: {
    fontSize: 18,
    paddingHorizontal: 10,
    textAlign: 'center',
    width: 50,
  },
  itemPrice: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  total: {
    fontSize: 24,
    fontWeight: 'bold',
    alignSelf: 'flex-end',
  },
  button: {
    backgroundColor: '#f4511e',
    borderRadius: 5,
    paddingVertical: 10,
    paddingHorizontal: 20,
    alignSelf: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
  },
});

export default Cart;
